<template>
  <div class="app-container">
      <div class="filter-container">
        
       <el-date-picker v-model="search.year" type="year"  placeholder="选择年"></el-date-picker>
        
       <el-date-picker v-model="search.month" type="month" value-format="MM" format="MM"  placeholder="选择月" style="margin-left:10px;"></el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>

    <div class="content">
        <el-table v-loading="listLoading" :data="list" 
          border fit highlight-current-row stripe 
          :summary-method="getSummaries" show-summary
          style="width: 100%">
          <el-table-column align="center" label="序" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row._id }}</span>
            </template>
          </el-table-column>
        <el-table-column  min-width="100" align="center" label="具体车型">
            <template slot-scope="scope">
              <span>{{ scope.row.car }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="VIN码">
            <template slot-scope="scope">
              <span>{{ scope.row.vincode }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="销售顾问">
            <template slot-scope="scope">
              <span>{{ scope.row.guider }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="所属部门">
            <template slot-scope="scope">
              <span>{{ scope.row.departname }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="客户姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.customername }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="联系电话">
            <template slot-scope="scope">
              <span>{{ scope.row.customerphone }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="车辆成本" prop="carcost">
            <template slot-scope="scope">
              <span>{{ scope.row.carcost }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="裸车价" prop="carprice">
            <template slot-scope="scope">
              <span>{{ scope.row.carprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="车款" prop="carsaleprice">
            <template slot-scope="scope">
              <span>{{ scope.row.carsaleprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="精品销售价" prop="boutiqueprice">
            <template slot-scope="scope">
              <span>{{ scope.row.boutiqueprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="精品成品" prop="boutiquecost">
            <template slot-scope="scope">
              <span>{{ scope.row.boutiquecost }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="保险金额" prop="insuranceprice">
            <template slot-scope="scope">
              <span>{{ scope.row.insuranceprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="保险成本" prop="insurancecost">
            <template slot-scope="scope">
              <span>{{ scope.row.insurancecost }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="保险返利" prop="insurancerebate">
            <template slot-scope="scope">
              <span>{{ scope.row.insurancerebate }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="上牌金额" prop="registerprice">
            <template slot-scope="scope">
              <span>{{ scope.row.registerprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="上牌成本" prop="registercost">
            <template slot-scope="scope">
              <span>{{ scope.row.registercost }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="其他金额" prop="otherprice">
            <template slot-scope="scope">
              <span>{{ scope.row.otherprice }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="其他成本" prop="othercost">
            <template slot-scope="scope">
              <span>{{ scope.row.othercost }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="总毛利" prop="totalprofit">
            <template slot-scope="scope">
              <span>{{ scope.row.totalprofit }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="返利项目1" prop="debate1">
            <template slot-scope="scope">
              <span>{{ scope.row.debate1 }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="返利项目2" prop="debate2">
            <template slot-scope="scope">
              <span>{{ scope.row.debate2 }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="含返利毛利" prop="debate3">
            <template slot-scope="scope">
              <span>{{ scope.row.debate3 }}</span>
            </template>
          </el-table-column>
          
          <el-table-column  min-width="100" align="center" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createtime |parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="chart" id="failChart" style="width:100%;height:400px;"></div>
    </div>



  </div>
</template>

<script>
import * as echarts from 'echarts';
import * as analyzeApi from '@/api/presale/analyze'
import {parseTime} from '@/utils/index';

export default {
    data(){
        return {
            list:null,
            listLoading:false,
            search:{
                type:'0|0',
                month:''
            },
            selectOptions:{
                
            },
            dialogOrder:{
                visible:false,
                listLoading:false,
                total:0,
                list:null,
                title:'战败记录'
            }
        }
    },
    created(){
        //echarts注册
        // echarts.use(
        //     [TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer]
        // );
        this.search.month=parseTime(new Date(),'{y}-{m}');
        this.fetchData();
    },
    methods:{
        fetchData(){
            var that=this;
            analyzeApi.getCarprofit({}).then(res=>{
                if(res.data){
                    that.list=res.data.items.map((o,index)=>{
                        o._id=index+1;
                        return o;
                    });
                }
            })
        },
        getSummaries(param){
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '总金额';
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            console.log(values);
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
                }, 0);
                //sums[index] += ' 元';
            } else {
                sums[index] = 'N/A';
            }
            });

            return sums;
        },
        
        searchClick(){
            this.fetchData();
        },
        
    }
}
</script>

<style scoped>
    .select-custom{
        display: flex; 
    }
    .select-custom.lv1{
        padding-left:0px;
    }
    .select-custom.lv2{
        padding-left:10px;
    }
    .select-custom.lv3{
        padding-left:20px;
    }
</style>